<template>
  <div class="playlist" @click="toPlayList">
    <div class="playlist-img">
      <img :src="coverImgUrl" alt="" />
    </div>
    <div class="playlist-info">
      <span>{{ name }}</span>
      <span>{{ count }}首 by{{ creater }}</span>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from "vue";
import { useCurrentInstance } from "@/utils/hooks";
export default defineComponent({
  /** 歌单列表组件 */
  name: "PlayList",
  props: {
    id: {
      type: Number,
      default: 0,
      required: true,
    },
    creater: {
      type: String,
      default: "",
      required: true,
    },
    name: {
      type: String,
      default: "",
      required: true,
    },
    coverImgUrl: {
      type: String,
      default: "",
      required: true,
    },
    count: {
      type: Number,
      default: 0,
      required: true,
    },
  },
  setup(props) {
    const _this = useCurrentInstance();
    /** 跳转到歌单 */
    const toPlayList = () => {
      _this.goPage("musiclist", { id: props.id });
    };
    return {
      toPlayList
    }
  },
});
</script>

<style lang='scss' scoped>
.playlist {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .playlist-img {
    width: 53px;
    height: 53px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .playlist-info {
    width: calc(100% - 63px);
    height: 53px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    span {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #707070;
      &:last-child {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>